<template>
  <mu-flex direction="column" style="height: 100%;">
    <!--顶部-->
    <MainHeader title="报修详情" :empty="true" :hasreturn="true"/>

    <mu-paper class="show-box">
      <mu-row style="padding-top: 10px;">
        <mu-col span="6">
          <div class="label">
            姓名：<span>{{repair.name}}</span>
          </div>
        </mu-col>
        <mu-col span="6">
          <div class="label">
            电话：<span>{{repair.tel}}</span>
          </div>
        </mu-col>
        <mu-divider/>
        <mu-col span="12">
          <div class="label">
            <span>故障描述：</span>
            <div>
              {{repair.explains}}
            </div>
          </div>
        </mu-col>
        <mu-divider/>
        <mu-col span="12">
          <div class="label font12 text-right">
            预约时间：{{repair.startTime}} 至 {{repair.endTime}}
          </div>
        </mu-col>
        <mu-divider style="background-color: #00afc3;"/>
        <!--维修报告-->
        <mu-col span="12">
          <div class="label">
            <span>
              <mu-flex style="margin-top: 4px;" justify-content="between" align-items="center">
                <span>维修报告：</span>
                <mu-badge :content="repair.status" :color="color(repair.status)"/>
              </mu-flex>
            </span>
            <div>
              {{repair.report?repair.report:'暂无维修报告'}}
            </div>
          </div>
        </mu-col>
        <mu-col span="12" v-if="repair.reportTime != null">
          <mu-divider/>
          <div class="label font12 text-right">
            维修时间：{{repair.reportTime}}
          </div>
        </mu-col>
        <mu-divider style="background-color: #00afc3;"/>
        <mu-col span="12">
          <div class="label">
            <span>
              <mu-flex style="margin-top: 4px;" justify-content="between" align-items="center">
                <span>我的评价：</span>
              </mu-flex>
            </span>
            <div v-if="canComment">
              <textarea class="textarea" placeholder="填写评价内容" v-model="repair.comment" rows="3">{{repair.comment}}</textarea>
            </div>
            <div v-if="!canComment">
              {{repair.comment?repair.comment:'无评价内容'}}
            </div>
          </div>
        </mu-col>
        <mu-col span="12" v-if="repair.commentTime != null">
          <mu-divider/>
          <div class="label font12 text-right">
            评价时间：{{repair.commentTime}}
          </div>
        </mu-col>
        <mu-divider style="background-color: #00afc3;"/>
        <mu-col span="12">
          <div class="label text-right">
            <mu-button flat small color="pink" v-if="canCancel" @click="doCancel(repair.id)">
              取消
              <mu-icon value="cancel" right/>
            </mu-button>
            <mu-button flat small color="teal" v-if="canComment" @click="doComment(repair.id)">
              提交评价
              <mu-icon value="rate_review" right/>
            </mu-button>
          </div>
        </mu-col>
      </mu-row>
    </mu-paper>
  </mu-flex>
</template>

<script>
  import MainHeader from '../components/MainHeader'
  import {mapMutations} from 'vuex'
  import $http from '@/store/ajax'

  export default {
    name: "RepairShow",
    components: {
      MainHeader
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.showNav(false)
      })
    },
    beforeRouteLeave(to, from, next) {
      this.showNav(true);
      next()
    },
    data() {
      return {
        repair: {}
      }
    },
    computed: {
      canComment () {
        return this.repair.status === '待评价'
      },
      canCancel () {
        return this.repair.status === '等待中'
      }
    },
    methods: {
      ...mapMutations(['showNav']),
      color(status) {
        if (status == '已取消') {
          return 'pink'
        } else if (status == '等待中') {
          return 'gray'
        } else if (status == '维修中') {
          return 'orange'
        } else if (status == '待评价') {
          return 'blue'
        } else if (status == '已完成') {
          return 'green'
        }
      },
      doCancel (id) {
        let self = this;
        $http.post('/api/repair/cancel/' + id, {}).then(data => {
          if (data.success) {
            self.$toast.success("取消成功！");
            self.$router.back()
          } else {
            self.$toast.warning("失败：" + data.msg)
          }
        })
      },
      doComment (id) {
        let self = this;
        $http.post('/api/repair/comment', {id: id, comment: this.repair.comment}).then(data => {
          if (data.success) {
            self.$toast.success("评价成功！");
            self.load()
          } else {
            self.$toast.warning("失败：" + data.msg)
          }
        })
      },
      load () {
        let id = this.$route.query.id;
        let self = this;
        $http.post('/api/repair/' + id, {}).then(data => {
          self.repair = data.payload
        })
      }
    },
    created() {
      this.load()
    }
  }
</script>

<style scoped>
  .show-box {
    margin: 5px;
    min-height: 50vh;
  }

  .label {
    padding: 8px 5px;
  }

  .label > div {
    padding: 8px 0;
  }
</style>
